<!DOCTYPE html>
<html>

        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
                <title></title>
                <script src="js/mui.min.js"></script>
                <style type="text/css">
                        body {
                                margin: 0px;
                                color: #969896;
                                background: black;
                        }
                        
                        #title {
                                line-height: 44px;
                                height: 44px;
                                text-align: center;
                                border-bottom: 1px solid #1D1F21;
                        }
                        
                        #scanbox {
                                position: fixed;
                                top: 44px;
                                left: 0px;
                                bottom: 200px;
                                width: 100%;
                                background-color: #111;
                                float: left;
                                z-index: -999;
                                text-align: center;
                        }
                        
                        #scanner {
                                position: absolute;
                                width: 100%;
                                height: 461px;
                        }
                                                
                        .footBar {
                                position: fixed;
                                left: 3px;
                                right: 3px;
                                bottom: 3px;
                                height: 192px;
                        }
                        
                        #scanresult {
                                position: absolute;
                                top: 0px;
                                left: 0px;
                                right: 0px;
                                bottom: 42px;
                                border: 1px solid #333;
                        }
                        
                        #buttom {
                                position: absolute;
                                right: 0px;
                                bottom: 0px;
                        }
                        
                        .button {
                                float: right;
                                margin-left: 3px;
                                width: 68px;
                                height: 36px;
                                line-height: 36px;
                                border: 1px solid #333;
                                text-align: center;
                        }
                </style>
        </head>

        <body>
                <div id="title">
                        扫描网址二维码添加书签
                </div>
                <div id="scanbox">
                        <div id="scanner">
                                <div>...加载中...</div>
                        </div>
                </div>
                <div class="footBar">
                        <div id="scanresult" contenteditable="true">可手动输入文章网址添加书签<br> (注：仅支持阅读页识别)</div>
                        <div id="buttom">
                                <div class="button">确认</div>
                                <div class="button">清空</div>
                        </div>
                </div>
        </body>
        <script type="text/javascript">
                mui.init();
                var scan;
                mui.plusReady( function () { //Android沉浸式状态栏设置			
                        if ( scan ) {}
                        else { newscan(); }
                } );

                function newscan() {
                        scan = new plus.barcode.Barcode( 'scanner', [ plus.barcode.QR ], {
                                frameColor: '#00FF00',
                                scanbarColor: '#00FF00'
                        } );
                        scan.onmarked = onmarked;
                        scan.start( {
                                conserve: false, //是否保存扫描的二维码图片
                                filename: "/storage/emulated/0/EasyReader/barcode/"
                        } );
                }

                // 二维码扫描成功(这里可以写扫描成功后的处理方法)
                function onmarked( type, result, file ) {
                        switch ( type ) {
                                case plus.barcode.QR:
                                        type = "QR";
                                        break;
                                case plus.barcode.EAN13:
                                        type = "EAN13";
                                        break;
                                case plus.barcode.EAN8:
                                        type = "EAN8";
                                        break;
                                default:
                                        type = "其它" + type;
                                        break;
                        }
                        document.querySelector( "#scanresult" ).value = result;
                }

                mui( '.foot-tab' ).on( 'tap', '.mui-btn', function ( event ) {
                        if ( this.id == "enter" ) {
                                if ( document.getElementById( "scanresult" ).value == "" ) {
                                        mui.toast( "无内容" )
                                        return;
                                }
                                var homePage = plus.webview.currentWebview().opener();
                                mui.fire( homePage, 'setbookmarker', document.getElementById( "scanresult" ).value );
                                mui.back();
                        }
                        if ( this.id == "clear" ) {
                                document.getElementById( "scanresult" ).value = "";
                                if ( scan ) scan.start();
                        }
                } );
                //监听窗口尺寸变化事件（变相监听软键盘弹出）
                function scanChange() {
                        if ( document.body.scrollHeight < 600 ) {
                                if ( scan ) scan.close();
                        }
                        else {
                                document.getElementById( "scanresult" ).blur();
                                newscan();
                        }
                }
                window.addEventListener( "resize", scanChange, false );
                //关闭窗口前先关闭二维码扫描控件
                mui.back = function () {
                        window.removeEventListener( "resize", scanChange );
                        if ( scan ) scan.close();
                        document.getElementById( "scanresult" ).blur();
                        plus.webview.currentWebview().close();
                }
        </script>

</html>